<template>
  <div class="bind-email-form-container">
    <a-form
      id="formLogin"
      ref="formLogin"
      :form="form"
    >
      <a-form-item
        :colon="false"
        required
      >
        {{ mobile | mobileFilter }}
        <a-input-search
          v-decorator.trim="[
            'code',
            {
              rules: [
                formRules.required('Incorrect email invalid')
              ],
              validateTrigger: 'change'
            }
          ]"
          type="text"
          placeholder="Mobile phone verification code"
          @search="sendMobileCode"
        >
          <a-button
            type="primary"
            slot="enterButton"
            :disabled="isSendCode"
          >
            {{ codeText }}
          </a-button>
        </a-input-search>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import form from './form'
import formRules from '@/utils/form/rules'
import { mobile } from '@/utils/mixins/sendCode'

export default {
  mixins: [form, mobile],

  props: {
    mobile: {
      type: String,
      default: () => '',
    },
    email: {
      type: String,
      default: () => '',
    },
  },

  filters: {
    mobileFilter (value) {
      return (value.toString()).replace(/(\d{3})\d*(\d{2})/, '$1******$2')
    },
  },

  data () {
    return {
      formRules,
    }
  },

  computed: {
  },
}
</script>

<style lang="scss" scoped>
.bind-email-form-container {
  .ant-form-item {
    margin-bottom: 10px;
  }
}
</style>
